Jassif Team Institution

HTML படிவ உறுப்புகள்

இந்த அத்தியாயம் அனைத்து வெவ்வேறு HTML படிவ உறுப்புகளையும் விவரிக்கிறது.

HTML <form> உறுப்புகள்

HTML <form> உறுப்பு பின்வரும் படிவ உறுப்புகளில் ஒன்று அல்லது அதற்கு மேற்பட்டவற்றைக் கொண்டிருக்கலாம்:

<input> உறுப்பு

மிகவும் அதிகமாகப் பயன்படுத்தப்படும் படிவ உறுப்புகளில் ஒன்று <input> உறுப்பு ஆகும்.

<input> உறுப்பு type பண்புக்கூறைப் பொறுத்து பல்வேறு வழிகளில் காட்சிப்படுத்தப்படலாம்.

எடுத்துக்காட்டு

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

<label> உறுப்பு

<label> உறுப்பு பல படிவ உறுப்புகளுக்கான ஒரு லேபிளை வரையறுக்கிறது.

<label> உறுப்பு திரை வாசிப்பாளர் பயனர்களுக்கு பயனுள்ளதாக இருக்கும், ஏனெனில் பயனர் உள்ளீட்டு உறுப்பில் கவனம் செலுத்தும் போது திரை வாசிப்பாளர் லேபிளை சத்தமாக வாசிக்கும்.

<label> உறுப்பு மிகச் சிறிய பகுதிகளைக் கிளிக் செய்வதில் சிரமம் உள்ள பயனர்களுக்கும் உதவுகிறது (ரேடியோ பொத்தான்கள் அல்லது சரிபார்ப்பு பெட்டிகள் போன்றவை) - ஏனெனில் பயனர் <label> உறுப்புக்குள் உள்ள உரையைக் கிளிக் செய்யும் போது, அது ரேடியோ பொத்தான்/சரிபார்ப்புப் பெட்டியை மாற்றுகிறது.

எடுத்துக்காட்டு

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label>

<select> உறுப்பு

<select> உறுப்பு ஒரு தரவிறக்க பட்டியலை வரையறுக்கிறது:

எடுத்துக்காட்டு

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

<option> உறுப்பு தேர்ந்தெடுக்கக்கூடிய ஒரு விருப்பத்தை வரையறுக்கிறது.

இயல்புநிலையாக, தரவிறக்க பட்டியலில் உள்ள முதல் உருப்படி தேர்ந்தெடுக்கப்பட்டுள்ளது.

முன்-தேர்ந்தெடுக்கப்பட்ட விருப்பத்தை வரையறுக்க, option க்கு selected பண்புக்கூறைச் சேர்க்கவும்:

<option value="fiat" selected>Fiat</option>

தெரியும் மதிப்புகள்:

தெரியும் மதிப்புகளின் எண்ணிக்கையைக் குறிப்பிட size பண்புக்கூறைப் பயன்படுத்தவும்:

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

பல தேர்வுகளை அனுமதிக்க:

பயனர் ஒன்றுக்கு மேற்பட்ட மதிப்பைத் தேர்ந்தெடுக்க அனுமதிக்க multiple பண்புக்கூறைப் பயன்படுத்தவும்:

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

<textarea> உறுப்பு

<textarea> உறுப்பு ஒரு பல வரி உள்ளீட்டுப் புலத்தை (உரைப் பகுதி) வரையறுக்கிறது:

எடுத்துக்காட்டு

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

rows பண்புக்கூறு உரைப் பகுதியில் தெரியும் வரிகளின் எண்ணிக்கையைக் குறிப்பிடுகிறது.

cols பண்புக்கூறு உரைப் பகுதியின் தெரியும் அகலத்தைக் குறிப்பிடுகிறது.

CSS ஐப் பயன்படுத்தி உரைப் பகுதியின் அளவையும் வரையறுக்கலாம்:

<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

<button> உறுப்பு

<button> உறுப்பு ஒரு கிளிக் செய்யக்கூடிய பொத்தானை வரையறுக்கிறது:

எடுத்துக்காட்டு

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

<fieldset> மற்றும் <legend> உறுப்புகள்

<fieldset> உறுப்பு ஒரு படிவத்தில் தொடர்புடைய தரவுகளை தொகுக்கப் பயன்படுகிறது.

<legend> உறுப்பு <fieldset> உறுப்புக்கான ஒரு தலைப்பை வரையறுக்கிறது.

எடுத்துக்காட்டு

<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

<datalist> உறுப்பு

<datalist> உறுப்பு ஒரு <input> உறுப்புக்கான முன் வரையறுக்கப்பட்ட விருப்பங்களின் பட்டியலைக் குறிப்பிடுகிறது.

பயனர்கள் தரவை உள்ளிடும்போது முன் வரையறுக்கப்பட்ட விருப்பங்களின் தரவிறக்க பட்டியலைக் காண்பார்கள்.

<input> உறுப்பின் list பண்புக்கூறு <datalist> உறுப்பின் id பண்புக்கூறைக் குறிப்பிட வேண்டும்.

எடுத்துக்காட்டு

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

<output> உறுப்பு

<output> உறுப்பு ஒரு கணக்கீட்டின் முடிவைக் குறிக்கிறது (ஸ்கிரிப்ட் மூலம் செய்யப்படும் ஒன்று போன்றது).

எடுத்துக்காட்டு

ஒரு கணக்கீட்டைச் செய்து <output> உறுப்பில் முடிவைக் காட்டவும்:

<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

பயிற்சி